<template>
	<view class="_pad-bottom-40">
		<view class="_pad-x-10  _white-bg ">
			<!-- 订单费用明细 -->
			<view class="_pad-y-20 bottom-border">
				<view class="_font-16 _b _mar-bottom-15">租车信息</view>
				<view class="_flex-row-bet-mid _font-14 _mar-bottom-15" v-if="cost_detail.order.home_take_price > 0">
					<view>上门取车费</view><view>￥{{cost_detail.order.home_take_price}}</view>
				</view>
				<view class="_flex-row-bet-mid _font-14 _mar-bottom-15" v-if="cost_detail.order.home_return_price > 0">
					<view>上门还车费</view><view>￥{{cost_detail.order.home_return_price}}</view>
				</view>
				<view class="_flex-row-bet-mid _font-14 _mar-bottom-15" v-if="cost_detail.order.car_fee > 0">
					<view>租车费合计</view><view>￥{{cost_detail.order.car_fee}}</view>
				</view>
				<view class="_flex-row-bet-mid _font-14 _mar-bottom-15" v-if="cost_detail.order.base_service_fee > 0">
					<view>基础服务费</view><view>￥{{cost_detail.order.base_service_fee}}</view>
				</view>
				<view class="_flex-row-bet-mid _font-14 _mar-bottom-15" v-if="cost_detail.order.service_cost > 0">
					<view>车辆手续费</view><view>￥{{cost_detail.order.service_cost}}</view>
				</view>
				<view class="_flex-row-bet-mid _font-14 _mar-bottom-15" v-if="cost_detail.order.car_service_fee > 0">
					<view>保险费合计</view><view>￥{{cost_detail.order.car_service_fee}}</view>
				</view>
				<view class="_flex-row-bet-mid _font-14 _mar-bottom-15" v-if="cost_detail.order.night_take_fee > 0">
					<view>夜间取车费</view><view>￥{{cost_detail.order.night_take_fee}}</view>
				</view>
				<view class="_flex-row-bet-mid _font-14 _mar-bottom-15" v-if="cost_detail.order.night_return_fee > 0">
					<view>夜间还车费</view><view>￥{{cost_detail.order.night_return_fee}}</view>
				</view>
				<view class="_flex-row-bet-mid _font-14 _mar-bottom-15" v-if="cost_detail.order.place_fee > 0">
					<view>跨网点还车费</view><view>￥{{cost_detail.order.place_fee}}</view>
				</view>
				<view class="_flex-row-bet-mid _font-14 _mar-bottom-15" v-if="cost_detail.order.city_fee > 0">
					<view>跨城还车费</view><view>￥{{cost_detail.order.city_fee}}</view>
				</view>
				<view class="_flex-row-bet-mid _font-14  _mar-bottom-15" v-if="cost_detail.order.coupon_price > 0">
					<view>优惠卷优惠</view><view>-￥{{cost_detail.order.coupon_price}}</view>
				</view>
				<view class="_flex-row-bet-mid _font-14  _mar-bottom-15" v-if="cost_detail.order.integral_price > 0">
					<view>积分抵扣</view><view>-￥{{cost_detail.order.integral_price}}</view>
				</view>
			</view>
			<!-- 续租订单费用明细 -->
			<view class="_pad-y-20 bottom-border" v-if="cost_detail.rerent.rerent.length > 0">
				<view class="_font-16 _b _mar-bottom-15">续租信息</view>
				<block v-for="(item,index) in cost_detail.rerent.rerent" :key="index">
					<view class="_flex-row-bet-mid _font-14  _mar-bottom-15">
						<view>续租时间</view><view>{{item.add_time}}</view>
					</view>
					<view class="_flex-row-bet-mid _font-14  _mar-bottom-15" v-if="item.car_fee > 0">
						<view>租车费合计</view><view>￥{{item.car_fee}}</view>
					</view>
					<view class="_flex-row-bet-mid _font-14 _mar-bottom-15"  v-if="item.base_service_fee > 0">
						<view>基础服务费</view><view>￥{{item.base_service_fee}}</view>
					</view>
					<view class="_flex-row-bet-mid _font-14 _mar-bottom-15"  v-if="item.car_service_fee > 0">
						<view>保险费合计</view><view>￥{{item.car_service_fee}}</view>
					</view>
					<view class="_flex-row-bet-mid _font-14 _mar-bottom-15">
						<view>是否支付</view><view>￥{{item.is_pay}}</view>
					</view>
				</block>
			</view>
			<!-- 还车费用明细 -->
			<view class="_pad-y-20 bottom-border" style="display: none;">
				<view class="_font-16 _b _mar-bottom-15">还车信息</view>
				<view class="_flex-row-bet-mid _font-14  _mar-bottom-15">
					<view>还车损坏金额</view><view>￥{{ cost_detail.return.damage_price }}</view>
				</view>
				<view class="_flex-row-bet-mid _font-14 _mar-bottom-15">
					<view>超时租车费</view><view>￥{{ cost_detail.return.over_car_fee }}</view>
				</view>
				<view class="_flex-row-bet-mid _font-14  _mar-bottom-15">
					<view>超时保险费</view><view>￥{{ cost_detail.return.over_car_service_fee }}</view>
				</view>
				<view class="_flex-row-bet-mid _font-14  _mar-bottom-15">
					<view>超时还车费</view><view>￥{{ cost_detail.return.over_return_fee }}</view>
				</view>
				<view class="_flex-row-bet-mid _font-14  _mar-bottom-15">
					<view>其他项目金额</view><view>￥{{ cost_detail.return.other_price }}</view>
				</view>
				<view class="_flex-row-bet-mid _font-14  _mar-bottom-15">
					<view>租车费合计</view><view>￥{{ cost_detail.return.before_car_fee }}</view>
				</view>
				<view class="_flex-row-bet-mid _font-14  _mar-bottom-15">
					<view>基础服务费</view><view>￥{{ cost_detail.return.before_base_service_fee }}</view>
				</view>
				<view class="_flex-row-bet-mid _font-14  _mar-bottom-15">
					<view>保险费合计</view><view>￥{{ cost_detail.return.before_car_service_fee }}</view>
				</view>
				<view class="_flex-row-bet-mid _font-14">
					<view>提前还车返还费</view><view>￥{{ cost_detail.return.before_return_fee }}</view>
				</view>
			</view>
			<!-- 押金费用明细 -->
			<view class="_pad-y-20 bottom-border" v-if="cost_detail.take.illegal_deposit || cost_detail.take.deposit">
				<view class="_font-16 _b _mar-bottom-15">押金信息</view>
				<view class="_flex-row-bet-mid _font-14  _mar-bottom-15" v-if="cost_detail.take.illegal_deposit">
					<view>违章押金</view><view>￥{{cost_detail.take.illegal_deposit}}</view>
				</view>
				<view class="_flex-row-bet-mid _font-14  _mar-bottom-15" v-if="cost_detail.take.deposit">
					<view>车型押金</view><view>￥{{cost_detail.take.deposit}}</view>
				</view>
				<view class="_flex-row-bet-mid _font-14  _mar-bottom-15">
					<view>是否支付</view><view>{{cost_detail.take.deposit_is_pay ? '已支付' : '未支付'}}</view>
				</view>
				<view class="_flex-row-bet-mid _font-14" v-if="!cost_detail.take.deposit_is_pay">
					<view></view><view class="btn-pay" @click="payDeposit">支付押金</view>
				</view>
			</view>
			<!-- 其他费用明细 -->
			<view class="_pad-y-20 bottom-border" v-if="cost_detail.rests.rests.length > 0">
				<view class="_font-16 _b _mar-bottom-15">其他信息</view>
				<view class="_flex-row-bet-mid _font-14  _mar-bottom-15" v-for="(item,index) in cost_detail.rests.rests" :key="index">
					<view>{{ item.fee_name }}</view><view>￥{{ item.price }}</view>
				</view>
			</view>
			
			<view class="_pad-y-20">
				<view class=" _flex-row-bet-mid _font-18 _b" >
					<view>实际订单总额</view><view style="color: #F7442C;">￥{{cost_detail.price||''}}</view>
				</view>
				<view class="_pad-top-20 _grey-99 _font-13">
					<view class="_mar-bottom-10">费用说明</view>
					<text>车行手续费用：门店收取手续费用用于车辆清洁、车辆保养、单据制作、人员服务等</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getOrderCost, payDeposit } from '@/api/car.js';
	export default{
		data(){
			return{
				order_id:0,
				cost_detail:{},
			};
		},
		onLoad(option){
			this.order_id = option.order_id;
			uni.showLoading({ title:'加载中...', mask:true })
			this.getOrderCost();
		},
		methods:{
			// 押金支付
			payDeposit(){
				let that = this;
				let param = {
					order_id: that.order_id
				}
				if(that.is_sumbit) return uni.showToast({title:'点太快啦',icon:'none'})
				that.is_sumbit = true;
				uni.showLoading();
				payDeposit(param).then((res)=>{
					uni.hideLoading();
					that.wxplay(res.data.result.jsConfig);
				}).catch((err)=>{
					uni.hideLoading();
					that.is_sumbit = false;
					uni.showToast({title:err,icon:'none'})
				})
			},
			// 微信支付
			wxplay(data){
				let that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: data.timestamp,
					nonceStr: data.nonceStr,
					package: data.package,
					signType: data.signType,
					paySign: data.paySign,
					success() {
						that.is_sumbit = false
						uni.showToast({title: '支付成功',icon:'none'})
						that.getOrderCost();
					},fail(err) {
						that.is_sumbit = false;
						uni.showToast({title:'取消支付',icon:'none'})
					}
				})
			},
			// 获取费用明细
			getOrderCost() {
				let that = this;
				getOrderCost({ order_id: that.order_id}).then((res)=>{
					uni.hideLoading();
					that.cost_detail = res.data;
				}).catch((err)=>{
					uni.hideLoading();
					uni.showToast({ title:err, icon:'none' })
				})
			}
		},
	}
</script>

<style scoped lang="scss">
.bottom-border{
	border-bottom:2rpx dashed #DDDDDD
}
.btn-pay {
	background-color: #19be6b;
	color: #FFFFFF;
	padding: 10rpx;
	border-radius: 8rpx;
}
</style>